﻿.homepage section[role=main] {
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 1fr;
    margin-left: 120px;
}

.homepage .pagetitle {
    font-family: "Futura Book";
}

#sets {
    -ms-grid-row: 1;
    height: 100%;
    width: 100%;    
    /*border: 1px solid red;*/
}

#singles {
    -ms-grid-row: 2;
    height: 100%;
    width: 100%;
    /*border: 1px solid blue;*/
}

.item {
    width: 210px;
    height: 210px;
    float: left;
    margin-top: 20px;
    margin-right: 20px;
    font-size: 32px;
    border: 1px solid gray;
    position: relative;
    overflow: hidden;
}

    .item > div {
       position: absolute;
       bottom: 0;
       width: 100%;
       background-color: rgba(0,0,0, 0.7);
       color: white; 
    }

@media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .homepage section[role=main] {
        margin-left: 100px;
        margin-right: 100px;
    }
}
